<!--人员选择框组件-->
<template>
  <el-dialog v-model="stateDialog" title="人员选择" width="1200px" center class="personnelSelection-dialog">
    <div class="dialog-search">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable size="large" @blur="searchBtn">
        <template #append>搜索</template>
      </el-input>
    </div>
    <div class="dialog-menu">
      <div></div>
      <div><el-button @click="checkAll">全选</el-button></div>
      <div><el-button @click="clear">清空</el-button></div>
    </div>
    <div class="dialog-body">
      <!--树形结构页面-->
      <div class="body-left body-box">
        <el-tree-v2
          ref="treeRef"
          :data="data"
          :props="props"
          :height="480"
          :default-expanded-keys="defaultExpandedKeys"
          :expand-on-click-node="false"
          @node-click="nodeClick"
          @node-expand="nodeExpand"
        />
      </div>
      <!--人员列表页面-->
      <div class="body-center body-box">
        <div class="center-item" v-for="(item, index) in personnelList" :key="index" @click="centerBtn(item, index)">
          {{ item.displayName }}
        </div>
      </div>
      <!--人员选择页面-->
      <div class="body-right body-box">
        <div class="right-item" v-for="(item, index) in personnelSelection" :key="index" @click="rightBtn(item, index)">
          {{ item.displayName }}
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
        <el-button type="primary" @click="submitBtn"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { firstLevelList, secondLevelList, personList } from "@/utils/personnelMock";
import { ElTreeV2 } from "element-plus";
import { ref } from "vue";
const props = {
  value: "level", //节点层级
  label: "label", //节点名称
  children: "children", //节点子集
}; //树形结构
const personnelList = ref([]); //人员列表
const personnelSelection = ref([]); //人员选择
const treeRef = ref(); //树形组件
const data = ref([
  {
    level: 1, //节点层级
    label: "浙江公司党委", //节点名称
  },
]); //初始列表数据
const defaultExpandedKeys = ref([1]); //默认展开一级节点
/**
 * 初始化时给一级节点添加子节点。
 */
data.value[0].children = firstLevelList.map((item, index) => {
  const label = item.orgShortName;
  return {
    level: `1-${index + 1}`, //节点层级
    label: label, //节点名称
    leaf: false, //是否是子节点。
    orgUUID: item.orgUUID, //节点id
    children: [{}],
  };
});
const search = ref(); //搜索框
const stateDialog = ref(false); //弹窗状态
const clickTimer = ref(null); //点击事件计时器
/**
 * 点击三角形图标时，请求子节点
 */
const nodeExpand = (node) => {
  node.children = secondLevelList.map((item, index) => {
    return {
      level: `${node.level}-${index + 1}`, //节点层级
      label: item.orgShortName, //节点名称
      leaf: item.leaf, //是否是子节点。
      orgUUID: item.orgUUID, //节点id
      parentOrgUuid: item.parentOrgUuid,
      children: item.leaf ? null : [{}], //当是子节点的时候，添加一个空的子节点
    };
  });
  treeRef.value.setData(data.value); //更新树形结构
};
const nodeClick = (node) => {
  if (clickTimer.value) {
    //双击事件
    const whether = personnelList.value.some((item) => item.orgUUID === node.orgUUID);
    if (!whether) {
      //当人员列表中没有该人员的时候，添加该人员
      personnelList.value.push({ displayName: node.label, orgUUID: node.orgUUID });
    }
    clearTimeout(clickTimer.value);
    clickTimer.value = null;
  } else {
    //单击事件
    clickTimer.value = setTimeout(() => {
      if (node.leaf) {
        const arrData = ref(personList).value.concat(Object.values(personnelList.value));
        personnelList.value = Array.from(new Set(arrData)); //请求人员列表信息
        treeRef.value.setData(data.value); //更新树形结构
      }
      clearTimeout(clickTimer.value);
      clickTimer.value = null;
    }, 400);
  }
};
/**
 * 人员选择按钮点击事件
 * @param value 选择的人
 * @param index 选择的人索引
 */
const centerBtn = (value, index) => {
  personnelList.value.splice(index, 1); //删除人员列表的人员
  personnelSelection.value.push(value); //添加人员列表的人员到人员选择
};
/**
 * 人员选择按钮点击事件
 * @param value 选择的人
 * @param index 选择的人索引
 */
const rightBtn = (value, index) => {
  personnelSelection.value.splice(index, 1); //删除人员列表的人员
  personnelList.value.push(value); //添加人员列表的人员到人员选择
};
/**
 * 全选事件
 */
const checkAll = () => {
  personnelSelection.value.push(...personnelList.value); //添加人员列表的人员到人员选择
  personnelList.value = []; //删除人员列表的人员
};
/**
 * 清空事件
 */
const clear = () => {
  personnelList.value.push(...personnelSelection.value); //添加人员选择的人员到人员列表
  personnelSelection.value = []; //删除人员选择的人员
};
/**
 * 搜索按钮点击事件
 */
const searchBtn = () => {
  //search.value,搜索值
  const arrData = ref(personList).value.concat(Object.values(personnelList.value));
  personnelList.value = Array.from(new Set(arrData)); //请求人员列表信息
};
/**
 * 打开弹窗
 * @param value 弹窗状态
 */
const showDialog = (value) => {
  stateDialog.value = value;
};
/**
 * 取消弹窗
 */
const cancel = () => {
  stateDialog.value = false;
};
const emit = defineEmits(["submit"]);
/**
 * 确认弹窗
 */
const submitBtn = () => {
  emit("submit", personnelSelection.value);
  stateDialog.value = false;
};
defineExpose({
  stateDialog,
  showDialog,
});
</script>
<style scoped lang="less">
.personnelSelection-dialog {
  .dialog-search {
    width: 300px;
    margin-bottom: 10px;
    :deep(.el-input) {
      .el-input-group__append {
        color: #fff;
        background-color: #409eff;
        cursor: pointer;
      }
    }
  }
  .dialog-menu {
    width: 100%;
    display: flex;
    column-gap: 20px;
    margin-bottom: 10px;
    div {
      flex: 1;
      display: flex;
      justify-content: end;
    }
  }
  .dialog-body {
    width: 100%;
    height: 500px;
    display: flex;
    column-gap: 20px;
    .body-box {
      flex: 1;
      border: 1px solid #c3c3c3;
    }
    .body-center,
    .body-right {
      height: 100%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-button {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #dddee0;
        border-radius: 2px;
      }
      .center-item,
      .right-item {
        display: flex;
        align-items: center;
        height: 30px;
        padding: 10px;
        cursor: pointer;
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}
</style>
